iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
1
自我挑戰組

輕鬆Vue一下系列 第 30

Day30-v-charts/實作(2)

  • 分享至 

  • xImage
  •  

實作(2)

https://ithelp.ithome.com.tw/upload/images/20191015/20112076vgXZacQOHW.jpg
昨天完成了一個簡單的網頁畫面,今天就來將功能的部分完成吧!!!

  • Save方法
    https://ithelp.ithome.com.tw/upload/images/20191015/20112076wPw6KIGHfc.jpg
    先利用Date物件將當日的日期轉化成固定格式-月-日,然後透過陣列的push方法讓input
    中的資料放進chartData中,因此圖片便會新增一項資料,如下:
    https://ithelp.ithome.com.tw/upload/images/20191015/20112076Df4fsEaCf0.jpg
  • Update方法
    https://ithelp.ithome.com.tw/upload/images/20191015/201120765e3i2BqZBF.jpg
    利用for迴圈在chartData.rows中尋找與被點擊目標相同日期之資料,將其的資料進行更改,如下:
    https://ithelp.ithome.com.tw/upload/images/20191015/20112076yTQplblYll.jpg
  • Delete方法
    https://ithelp.ithome.com.tw/upload/images/20191015/20112076OUA9bS3x3x.jpg
    利用for迴圈在chartData.rows中尋找與被點擊目標相同日期之資料,
    將其藉由陣列的splice方法進行資料刪除,如下:
    https://ithelp.ithome.com.tw/upload/images/20191015/20112076AlPArTlEWU.jpg

30日心得

經過這30日的學習,使我對vue從完全不熟,到簡單了解,現在已經可以利用它做出一個簡單的網頁,但是vue它是一個很新的框架,相信在未來它還會持續壯大,該學的東西永遠都學不完,因此未來的日子裡我會繼續學習它,提升自己的能力。


上一篇
Day29-v-charts/實作(1)
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-02 07:40:28

恭喜完賽!
30天能學到的真的有限
但是每天學就是有進步!!!
/images/emoticon/emoticon34.gif

我要留言

立即登入留言